<template>
  <div class="actionSheet-warp" v-if="isShow">
    <transition name="fadeShow">
      <div class="gray-cover" v-show="wrapShow" @click="cancel"></div>
    </transition>
    <transition name="slideUp">
      <div v-show="itemShow">
        <ul class="action-ul">
          <li class="action-li"
              v-for="(item,index) in actionData"
              :class="item.iconClass"
              :key="index"
              @click="check(index)">
            {{item.txt}}
          </li>
        </ul>
        <ul class="action-ul">
          <li class="action-li action-cancel" @click="cancel">取消</li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      },
      actionData: {
        type: Array,
        default: []
      },
    },
    data(){
      return {
        wrapShow: false,
        itemShow: false
      }
    },
    methods: {
      check(v){
        this.$emit("check", v);
        this.cancel();
      },
      cancel(){
        this.wrapShow = false;
        this.itemShow = false;
        setTimeout(() => {
          this.$emit("cancel", false);
        }, 200)
      }
    },
    watch: {
      isShow(){
        if (this.isShow) {
          setTimeout(() => {
            this.wrapShow = true;
            this.itemShow = true;
          }, 20)
        }
      }
    }
  }
</script>

<style lang="scss">
  @import "../scss/mixin";

  .actionSheet-warp {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 999;
    .gray-cover {
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
      @include gray_cover;
    }
    $action_br: 5px;
    .action-ul {
      position: relative;
      padding: 4px 20px;
      width: 100%;
      text-align: center;
      color: #007aff;
      border-radius: $action_br;
      overflow: hidden;
    }
    .action-li {
      position: relative;
      height: 43px;
      background-color: #fff;
      font-size: 16px;
      @include flex-display;
      @include flex-align-center;
      @include flex-pack-center;
      &:active {
        font-size: 15px;
      }
      border-bottom: 1px solid #c8c7cc;
      &:first-child {
        border-top-left-radius: $action_br;
        border-top-right-radius: $action_br;
      }
      &:last-child {
        border: none;
        border-bottom-left-radius: $action_br;
        border-bottom-right-radius: $action_br;
      }
    }
    .action-cancel {
      font-weight: 600;
      color: $red;
      margin-bottom: 8px;
    }
  }
</style>
